<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table @selectRowKey="selectRowKey" ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm"
      @resetSearch="resetSearch">
      <template #tableSearch>
        <a-col :span="6">
          <a-form-item field="user" label="会员账号">
            <a-input allow-clear v-model="searchForm.user" placeholder="会员账号" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="uid" label="会员UID">
            <a-input allow-clear v-model="searchForm.uid" placeholder="会员UID" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="id_card_type" label="身份类型">
            <sa-select v-model="searchForm.id_card_type" :data="paramsData.id_card_type"
            :fieldNames="{ label: 'title', value: 'value' }" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="from_type" label="来源">
            <sa-select v-model="searchForm.from_type" :data="paramsData.from_type"
            :fieldNames="{ label: 'title', value: 'value' }" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="state" label="状态">
            <sa-select v-model="searchForm.state" :data="paramsData.state"
              :fieldNames="{ label: 'title', value: 'value' }" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="date" label="日期">
            <a-range-picker v-model="searchForm.date" format="YYYY-MM-DD" :allow-clear="true"
              @change="refresh"></a-range-picker>
          </a-form-item>
        </a-col>
      </template>
      <template #tableAfterButtons>
        <a-select style="width:260px" v-if="selectKey && selectKey.length > 0" v-model="selectType" placeholder="请选择">
          <a-option style="width:300px" v-for="(itm, idx) in operationType" :value="itm.value" :label="itm.title"
            :key="idx"></a-option>
        </a-select>
        <a-button v-if="selectKey && selectKey.length > 0" type="primary" @click="quickOperation"
          :loading="operationLoaidng"> 一键操作</a-button>
        <a-button type="primary" @click="tongji">提现统计</a-button>
        <a-button type="primary" status="warning" style="padding:10px 20px" @click="exportExcel"
          :loading="exportLoading"><icon-share-external />导出</a-button>
      </template>
      <template #operationAfterExtend="{ record }">
        <a-button type="primary" size="mini" shape="round" v-if="record.state != 0"
          @click="handleDetail('detail', record)">详情 </a-button>
        <a-button type="primary" size="mini" shape="round" v-if="record.state == 0" class="yellow_color"
          @click="handleDetail('check', record)">审核 </a-button>
        <!-- <a-popconfirm v-if="record.state != 0" content="确认回退到待审核状态吗?" position="bottom" @ok="reCheck(record)">
          <a-button type="primary" size="mini" shape="round" class="yellow_color">重新审核 </a-button>
        </a-popconfirm> -->

      </template>

      <template #user="{ record }">
        <div>UID: {{ record.user_id }}</div>
        <a-tooltip :content="record.user_name">
          <div >会员账号: {{ record.user_name }}</div>
        </a-tooltip>
        <a-tooltip :content="record.true_name">
          <div >姓名: {{ record.true_name }}</div>
        </a-tooltip>
        <a-tooltip :content="record.mobile">
          <div >手机号: {{ record.mobile }}</div>
        </a-tooltip>
          <div >身份类型: {{ record.id_card_text }}</div>

        
      </template>
      <template #asset="{ record }">
        <div>提现资产: {{ record.points_text }}</div>
        <div>收款渠道: {{ record.card_type_text }}</div>
        <div>来源: {{ record.from_type_text }}</div>
      </template>
      <template #number="{ record }">
        <div>提现总数:{{ record.num }}  {{record?.card?.num_cn? '( ¥'+ record?.card?.num_cn+")":'' }}</div>
        <div v-if="record.id_card>0">{{ record.cost }}  {{record?.card?.cost_cn? '( ¥'+ record?.card?.cost_cn+")":'' }}</div>
        <div v-else>手续费: {{ record.cost }}  {{record?.card?.cost_cn? '( ¥'+ record?.card?.cost_cn+")":'' }}</div>
        <div>获得数量: {{ record.get_num }}</div>
        <div>到手数量: {{ record.get_num_real }} {{ record.get_points }}</div>
      </template>
      <template #state="{ record }">
        <a-tag color="blue" v-if="record.state == 0">{{ record.state_text }}</a-tag>
        <a-tag color="green" v-else-if="record.state == 1">{{ record.state_text }}</a-tag>
        <a-tag color="magenta" v-else>{{ record.state_text }}</a-tag>
      </template>
      <template #bank_card="{ record }">
        <div>类型: {{ record.card_type_text }}</div>
        <a-tooltip :content="record?.card?.bank_name">
          <div >银行名称: {{record?.card?.bank_name}}</div>
        </a-tooltip>
        <a-tooltip :content="record?.card?.sub_bank_name">
          <div >支行名称: {{record?.card?.sub_bank_name}}</div>
        </a-tooltip>
        <a-tooltip :content="record.card?.number">
          <div>卡号: {{ record.card?.number }}</div>
        </a-tooltip>
        <div>姓名: {{ record.card?.true_name }}</div>
      </template>
      <template #time="{ record }">
        <div>申请时间: {{ record.create_time }}</div>
        <div>处理时间: {{ record.update_time }}</div>
        <div class="over_text">备注: {{ record.msg }}</div>
      </template>
    </sa-table>
    <!-- 编辑表单 -->
    <detail-form ref="detailRef" @success="refresh" />
    <withdraw-table ref="tableRef"></withdraw-table>
    <a-modal :visible="visible" :width="400" :ok-loading="submitLoading" title="输入谷歌验证码" :on-before-ok="handleOk"
      @cancel="handleCancel" title-align="start">
      <div>
        <a-input v-model="deleteForm.google_code" placeholder="请输入" allow-clean />
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import SaTable from '@cps/sa-table/index.vue'
import SaSelect from '@cps/sa-select/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import { useRouter } from 'vue-router';
import detailForm from './detail.vue'
import withdrawTable from './withdrawTable.vue';
import tool from '@/utils/tool'
const submitLoading = ref(false)
const exportLoading = ref(false)
const operationLoaidng = ref(false)
const selectType = ref(null)
const router = useRouter()
const crudRef = ref()
const detailRef = ref()
const visible = ref(false)
const tableRef = ref()
const operationType = [
  { title: '通过审核(已转帐給對方)', value: 1 },
  { title: '不通过审核(退回金额)', value: 2 },
]
const searchForm = ref({
  state: 99,
  date: [],
  user: '',
  id_card_type: '',
  from_type:'',
  uid:'',
})
const deleteForm = ref({ //刪除 确认彈窗
  id: '',
  google_code: '',
})
const options = reactive({
  api: memberApi.withdraw_list,//表格数据接口
  operationColumnWidth: 200,//操作欄
  columnAlign: 'left',
  pageSimple: false,
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,//是否显示全部
    onlyCurrent: false,//是否只选中當前頁
  },
  isExpand: false,//展開所有子樹
})

const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 100 },
  { title: '会员信息', dataIndex: 'user', width: 220 },
  { title: '提现资产', dataIndex: 'asset', width: 220 },
  { title: '提现数量', dataIndex: 'number', width: 220 },
  { title: '状态', dataIndex: 'state', width: 120,align:'center' },
  { title: '银行卡', dataIndex: 'bank_card', width: 220 },
  { title: '时间', dataIndex: 'time', width: 230 },
])
const tongji = () => {
  tableRef.value?.open()
}
const reCheck = (data) => {
  deleteForm.value.google_code = ''
  deleteForm.value.id = data.id
  visible.value = true
}
const handleDetail = (type, data) => {
  detailRef.value?.open(type, data)
}
const quickOperation = async () => {
  console.log('hhh', selectType.value);
  if (!selectType.value) {
    Message.warning('请选择操作类型')
    return false
  } else {
    operationLoaidng.value = true
    let params = {
      ids: selectKey.value.join(','),
      state: selectType.value
    }
    const { data } = await memberApi.change_select_state(params)
    Message.success('操作成功')
    operationLoaidng.value = false
    refresh()
  }
}
const exportExcel = throttle(async () => {
  try {
    exportLoading.value = true
    const result = await tool.downloadFile('/user/admin/withdraw/export', searchForm.value,'提现列表')
  } finally { 
    exportLoading.value = false
  }
}, 3000)
const selectKey = ref([])
const selectRowKey = (e) => {
  selectKey.value = e
  console.log('列', e);
}
const initPage = async () => { }
// 刪除管理员  确定事件
const handleOk = async (done) => {
  submitLoading.value = true
  if (deleteForm.value.google_code) {
    try {
      const resp = await memberApi.revokeState(deleteForm.value)
      Message.success(`操作成功`)
      submitLoading.value = false
      crudRef.value?.refresh()
      visible.value = false
      done(true)
    } catch {
      submitLoading.value = false
    }
  } else {
    Message.error('请输入谷歌验证码')
    submitLoading.value = false
  }
  done(false)
}
const resetSearch = () => {
  searchForm.value.date = []
}
const handleCancel = () => {
  visible.value = false
}
const refresh = async () => {
  crudRef.value?.refresh()
}
const paramsData = ref({})
// 获取角色组
const getParams = async () => {
  const { data } = await memberApi.withdraw_list_params()
  paramsData.value = { ...data }
  paramsData.value.state = tool.simpleTransformArray(data.state)
  paramsData.value.state.unshift({ title: '全部', value: 99 })
  paramsData.value.from_type = tool.simpleTransformArray(data.from_type)
  paramsData.value.id_card_type = tool.simpleTransformArray(data.id_card_type)
}



onMounted(async () => {
  getParams()
  initPage()
  refresh()
})
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>
